---
import { formatDate } from '~/lib/utils'
import { POSTS_CONFIG } from '~/config'
import Prose from '~/components/posts/base/Prose.astro'
import Badge from '~/components/posts/base/Badge.astro'

interface Props {
  frontmatter: any
  minutesRead?: string
}

const { frontmatter, minutesRead } = Astro.props
const recommendText = POSTS_CONFIG.recommendText
---

<article class="relative fade-up">
  <div class="px-6 sm:px-8 py-4 sm:py-6 lg:py-8">
    <div class="global-layout-width mx-auto">
      <header>
        <div class="space-y-4 md:space-y-5">
          {frontmatter.description && <p class="text-sm text-muted-foreground/90 leading-relaxed">{frontmatter.description}</p>}

          <div class="text-xl lg:text-2xl font-semibold leading-tight" data-pagefind-body>
            {frontmatter.title}
          </div>

          <div class="flex flex-wrap items-center gap-3 sm:gap-4 text-sm text-muted-foreground/85">
            <div class="flex items-center gap-1.5">
              <span class="icon-[ph--calendar-blank] w-4 h-4 opacity-85"></span>
              <time datetime={frontmatter.pubDate.toISOString()}>
                {formatDate(frontmatter.pubDate)}
              </time>
              {
                frontmatter.updatedDate && (
                  <div class="flex items-center gap-1.5">
                    / Update
                    <time datetime={frontmatter.updatedDate.toISOString()}>{formatDate(frontmatter.updatedDate)}</time>
                  </div>
                )
              }
            </div>

            {
              minutesRead && (
                <div class="flex items-center gap-1.5">
                  <span class="icon-[ph--book-open-text] w-4 h-4 opacity-85" />
                  <span>{minutesRead} mins</span>
                </div>
              )
            }
            <div class="flex items-center gap-1.5">
              <span class="icon-[ph--eye] w-4 h-4 opacity-85"></span>
              <span id="busuanzi_container_page_pv">
                <span id="busuanzi_value_page_pv"></span> views
              </span>
            </div>
          </div>

          <div class="flex gap-2 sm:gap-2.5 lg:gap-3 flex-wrap">
            {frontmatter.recommend && <Badge type="recommend" content={recommendText} />}
            {frontmatter.tags?.map((tag: string) => <Badge type="tag" content={tag} size="sm" />)}
          </div>
        </div>
        <div class="border-b border-border/60 my-8 sm:my-10 lg:my-12"></div>
      </header>

      <Prose>
        <slot />
      </Prose>
    </div>
  </div>
</article>
